<template>
  <el-dialog :visible.sync="_show"
             append-to-body
             :close-on-click-modal="false"
             @close="onEventDialogClose">
    <k-form ref="form" label-width="110px" :data="data" :rules="rules" @submit="onSubmit">

      <el-row>
        <el-col :span="12">
          <k-form-item label="公司名称" prop="name">
            <el-input v-model="data.name"/>
          </k-form-item>
        </el-col>

        <el-col :span="12">
          <k-form-item label="企业类型" prop="mode">
            <el-select v-model="data.mode">
              <el-option v-for="(str, idx) in $store.getters['company/modes']"
                         :key="idx"
                         :value="str"
              />
            </el-select>
          </k-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <k-form-item label="行业类型" prop="type">
            <el-input v-model="data.type"/>
          </k-form-item>
        </el-col>

        <el-col :span="12">
          <k-form-item label="企业规模" prop="limit">
            <el-select v-model="data.limit">
              <el-option value="1-50人"/>
              <el-option value="50-100人"/>
              <el-option value="200-500人"/>
              <el-option value="500-1000人"/>
              <el-option value="2000-5000人"/>
              <el-option value="5000-10000人"/>
              <el-option value="10000人以上"/>
            </el-select>
          </k-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <k-form-item label="法人" prop="boss">
            <el-input v-model="data.boss"/>
          </k-form-item>
        </el-col>

        <el-col :span="12">
          <k-form-item label="注册资本" prop="money">
            <el-input v-model="data.money">
              <span slot="append">万元</span>
            </el-input>
          </k-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <k-form-item label="成立时间" prop="create_date">
            <el-date-picker
              v-model="data.create_date"
              type="date"
              value-format="yyyy-MM-DD"
              placeholder="选择日期">
            </el-date-picker>
          </k-form-item>
        </el-col>

        <el-col :span="12">
          <k-form-item label="经营状态">
            <el-select v-model="data.state">
              <el-option value="存续"/>
              <el-option value="在业"/>
            </el-select>
          </k-form-item>
        </el-col>
      </el-row>

      <k-form-item label="类型">
        <el-radio-group v-model="data.type2">
          <el-radio :label="0">私营企业</el-radio>
          <el-radio :label="1">国有企业</el-radio>
          <el-radio :label="2">非盈利社会团体</el-radio>
          <el-radio :label="3">外资企业</el-radio>
          <el-radio :label="4">合资企业</el-radio>
        </el-radio-group>
      </k-form-item>

      <k-form-item label="统一信用代码" prop="code">
        <el-input v-model="data.code"/>
      </k-form-item>

      <k-form-item label="公司地址" prop="address">
        <el-input v-model="data.address"/>
      </k-form-item>

      <k-form-item label="经营范围" prop="runarea">
        <el-input v-model="data.runarea" type="textarea" rows="5"/>
      </k-form-item>

      <k-form-item label="公司简介" prop="content">
        <el-input v-model="data.content" type="textarea" rows="5"/>
      </k-form-item>

    </k-form>

    <div slot="footer">
      <el-button type="primary" @click="$refs.form.onSubmit()" :loading="subing">保存</el-button>
      <el-button @click="_show = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'company-edit',
    props: {
      show: Boolean,
    },
    computed: {
      _show: {
        get () {
          return this.show
        },
        set (v) {
          this.$emit('update:show', v)
        }
      }
    },
    data () {
      return {
        data: {
          limit: '50-100人',
          state: '存续',
          mode: '',
          type2: 0
        },
        rules: {
          name: [
            { required: true, message: '公司名称不能为空' },
            { max: 32, message: '公司名称长度不符' },
          ],
          mode: [
            { required: true, message: '企业类型不能为空' },
          ],
          type: [
            { required: true, message: '行业类型不能为空' },
          ],
          boss: [
            { required: true, message: '法人不能为空' },
          ],
          money: [
            { required: true, message: '注册资本不能为空' },
          ],
          create_date: [
            { required: true, message: '成立时间不能为空' },
          ],
          code: [
            { required: true, message: '统一信用代码不能为空' },
          ],
          address: [
            { required: true, message: '公司地址不能为空' },
          ],
          runarea: [
            { required: true, message: '经营范围不能为空' },
          ],
          content: [
            { required: true, message: '公司简介不能为空' },
          ]
        },
        subing: false,
        successCallback: null
      }
    },
    mounted () {
      this.$store.dispatch('company/getModes')
        .then(() => {
          this.$set(this.data, 'mode', this.$store.getters['company/modes'][0])
        })
    },
    methods: {
      onSubmit () {
        this.subing = true
        this.$http.post('admin/companys', this.data)
          .finally(() => this.subing = false)
          .then((result) => {
            if (result.res_code === 0) {
              this.$message.success('保存成功')
              this._show = false
              this.successCallback(result.data)
            } else {
              this.$message.error(result.res_msg)
            }
          })
      },
      onEventDialogClose () {
        Object.assign(this.$data, this.$options.data())
        this.$nextTick(() => {
          this.$refs.form.resetFields()
        })
      }
    }
  };
</script>

<style scoped>

</style>
